Feature/upgrade mui v9#980
Open
santipalenque wants to merge 11 commits into
Open
Conversation
…s codemod - Bump react/react-dom to ^18.0.0, @types/react* to ^18.0.0 - Bump @testing-library/react to ^13.4.0 (React 18 compat) - Bump @mui/material and @mui/icons-material to ^9.0.0 - Bump @mui/x-date-pickers to ^9.0.0 - Replace ReactDOM.render with createRoot in src/index.js - Replace ReactDOM.render with createRoot in src/components/mui/showConfirmDialog.js - Replace Grid2 imports with Grid as Grid2 across ~60 files (Grid2 removed in v9) - Replace deprecated MailOutline icon with MailOutlined - Apply @mui/codemod deprecations/text-field-props (8 files changed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
12 files changed (4 Autocomplete source files + test snapshots). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 source file changes — no deprecated Tooltip props (componentsProps/PopperProps) found in src. Codemod ran against 8 test files but only made formatting changes that prettier reverted. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 source file changes — no deprecated ListItem props (ContainerComponent/ ContainerProps) found in src. Codemod touched 8 test files with formatting changes only, reverted by prettier. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 source file changes — no deprecated Divider props found in src (as expected). Codemod touched 8 test files with formatting changes only, reverted by prettier. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- testSetupFile.js: remove useLazyRipple mock (MUI v9 internal path gone); clean up stale React 16 comments in console suppressors - Multi-line Grid2 imports: fix remaining files where Grid2 was on its own line inside a multi-line import block (missed by earlier sed patterns) - global-template-popup.test.js: remove outer act() wrappers around multi-click blocks so React 18 flushes isSaving between clicks - form-template-popup.test.js: same fix for duplicate-save guard - customized-form-popup.test.js: same fix for duplicate-save guard - process-request-popup.test.js: add explicit microtask flush after render so fetchSponsorByCompany resolves before form submit click Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 source file changes. - rename-adapter-date-fns-imports: N/A (project uses AdapterMoment, not date-fns) - rename-type-imports: N/A (project uses .js, not .ts/.tsx) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…TimePicker The @mui/x-codemod v9 migrate-text-field-props transform incorrectly migrated `inputProps` → `slotProps.textField.slotProps.htmlInput` on DateTimePicker components imported from openstack-uicore-foundation. That component wraps react-datetime (not MUI X) and still expects `inputProps` to pass placeholder to the underlying input. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Target Chrome 117+, Edge 121+, Firefox 121+, Safari 17+ to align with React 18 and MUI v9 browser support requirements. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR updates React, React DOM, MUI, browser targets, and related UI/test code across the application. It also migrates the app and dialog mounting APIs to React 18, replaces MUI Grid2 usage with Grid in many layouts, and adjusts several date picker, autocomplete, and test interactions. ChangesReact 18 and MUI compatibility upgrade
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
src/pages/sponsors-global/form-templates/add-form-template-item-popup.js (1)
15-15: 📐 Maintainability & Code QualityMUI v9 Grid2 was renamed to
Grid; current alias is compatibleMUI v9 does not export a separate
Grid2; the Grid v2 implementation is exposed asGrid. Soimport { Grid as Grid2 } from "@mui/material"is importing the correct component (it just aliases the local variable name). You can simplify toimport { Grid }and update JSX to useGriddirectly if desired.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/sponsors-global/form-templates/add-form-template-item-popup.js` at line 15, The import aliases Grid as Grid2 are unnecessary because MUI v9 exposes the v2 Grid as Grid; update the import to import { Grid } from "`@mui/material`" and then replace all usages of the local symbol Grid2 in this file (e.g., JSX elements and any references) with Grid so the component uses the standard name; ensure no other local variable named Grid conflicts after the rename.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Line 95: The package.json dependency "openstack-uicore-foundation" is pinned
to a beta release; change its version string to the latest stable 5.x (e.g.
"^5.0.17") in the dependencies section, then run your package manager to update
lockfile (npm install or yarn install) so the project uses the stable release
rather than the 6.0.0-beta.4 prerelease.
In `@src/components/mui/formik-inputs/company-input-mui.js`:
- Around line 174-191: The current slotProps spreads params.slotProps.input at
the top level so sx and endAdornment are applied to the wrong slot; fix by
nesting input-specific props under slotProps.input — e.g. set slotProps={{
...params.slotProps, input: { ...(params.slotProps?.input || {}), sx: { "&
input::placeholder": { color: "`#00000061`", opacity: 1 } }, endAdornment: (<>
{loading && <CircularProgress color="inherit" size={20} />}
{params.slotProps.input?.endAdornment} </>) } , inputLabel: { shrink: false } }}
so the TextField input slot receives the placeholder styling and endAdornment
while preserving other params.slotProps values.
In `@src/components/mui/formik-inputs/mui-formik-async-select.js`:
- Around line 97-111: The slotProps structure is incorrect: move input-level
props (endAdornment and any params.slotProps.input spread) under the input slot
and remove sx from slotProps so sx is passed directly to the TextField;
specifically in mui-formik-async-select.js update the TextField usage to set
slotProps={{ input: { ...params.slotProps.input, endAdornment: (<> {loading &&
<CircularProgress size={20} />} {params.slotProps.input?.endAdornment} </>) },
inputLabel: { shrink: false } }} and ensure sx is provided as a top-level prop
on the TextField (do the same structural fix for mui-sponsor-input.js and
sponsorship-input-mui.js).
In `@src/index.js`:
- Around line 33-34: The code currently calls createRoot(container) where
container is from document.querySelector("`#root`") and can be null; add a
defensive null check after const container = document.querySelector("`#root`") to
verify container is not null before calling createRoot(container), and if it is
null throw or log a clear error (e.g., throw new Error("Root element '`#root`' not
found")) to avoid calling createRoot(null) and provide a helpful message; update
any related initialization that uses root to only run after the check passes.
In
`@src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-info-module.js`:
- Line 4: Update the MUI import to use the v9 name: replace the aliased Grid2
import with Grid so the line imports Grid, Box, and InputLabel from
"`@mui/material`"; locate the import that currently references Grid2 and change it
to Grid (remove the aliasing), ensuring any local references to Grid2 are
updated to Grid if present.
In `@src/pages/tickets/ticket-type-list-page.js`:
- Around line 447-455: The sale-period start DateTimePicker is calling
epochToMomentTimeZone with currentSummit.time (which may be undefined) instead
of the timezone ID used elsewhere; update the DateTimePicker value call so
epochToMomentTimeZone receives currentSummit.time_zone_id (consistent with the
end picker and other code) while still passing
ticketTypeFilters.sale_period_filter[0] as the epoch argument; locate the
DateTimePicker component and the epochToMomentTimeZone usage to make this
replacement.
---
Nitpick comments:
In `@src/pages/sponsors-global/form-templates/add-form-template-item-popup.js`:
- Line 15: The import aliases Grid as Grid2 are unnecessary because MUI v9
exposes the v2 Grid as Grid; update the import to import { Grid } from
"`@mui/material`" and then replace all usages of the local symbol Grid2 in this
file (e.g., JSX elements and any references) with Grid so the component uses the
standard name; ensure no other local variable named Grid conflicts after the
rename.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: efff754b-7f4b-487c-a336-38dd797687b2
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (90)
.browserslistrcpackage.jsonsrc/components/audit-logs/index.jssrc/components/filters/media-type-filter/__tests__/media-type-filter.test.jssrc/components/forms/badge-form.jssrc/components/forms/event-form.jssrc/components/forms/sponsor-settings-form/index.jssrc/components/mui/ClientCard/components/EditAddressDialog.jsxsrc/components/mui/ClientCard/components/EditClientDialog.jsxsrc/components/mui/ClientCard/index.jsxsrc/components/mui/RefundForm/index.jsxsrc/components/mui/formik-inputs/company-input-mui.jssrc/components/mui/formik-inputs/item-price-tiers.jssrc/components/mui/formik-inputs/mui-formik-async-select.jssrc/components/mui/formik-inputs/mui-sponsor-input.jssrc/components/mui/formik-inputs/sponsorship-input-mui.jssrc/components/mui/showConfirmDialog.jssrc/components/schedule-builder/schedule-admin-empty-spots-modal.jssrc/components/select-page-template-dialog/index.jssrc/components/summit-event-bulk-actions/summit-event-bulk-editor-form.jssrc/components/summit-event-bulk-actions/summit-event-bulk-editor-item.jssrc/index.jssrc/pages/attendees/summit-attendees-list-page.jssrc/pages/emails/email-log-list-page.jssrc/pages/events/summit-event-list-page.jssrc/pages/events/summit-presentations-votes-page.jssrc/pages/media_file_types/components/media-file-type-dialog.jssrc/pages/media_file_types/media-file-type-list-page.jssrc/pages/orders/purchase-order-list-page.jssrc/pages/signage/index.jssrc/pages/speakers/summit-speakers-list-page.jssrc/pages/sponsors-global/form-templates/add-form-template-item-popup.jssrc/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.jssrc/pages/sponsors-global/form-templates/form-template-item-list-page.jssrc/pages/sponsors-global/form-templates/form-template-list-page.jssrc/pages/sponsors-global/form-templates/form-template-popup.jssrc/pages/sponsors-global/form-templates/sponsor-inventory-popup.jssrc/pages/sponsors-global/inventory/inventory-list-page.jssrc/pages/sponsors-global/page-templates/page-template-list-page.jssrc/pages/sponsors-global/page-templates/page-template-popup/index.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-info-module.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.jssrc/pages/sponsors/popup/add-sponsor-popup.jssrc/pages/sponsors/popup/edit-tier-popup.jssrc/pages/sponsors/show-pages-list-page/index.jssrc/pages/sponsors/show-purchase-list-page/index.jssrc/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.jssrc/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.jssrc/pages/sponsors/sponsor-form-item-list-page/index.jssrc/pages/sponsors/sponsor-forms-list-page/components/form-template/__tests__/form-template-popup.test.jssrc/pages/sponsors/sponsor-forms-list-page/components/form-template/form-template-form.jssrc/pages/sponsors/sponsor-forms-list-page/components/global-template/__tests__/global-template-popup.test.jssrc/pages/sponsors/sponsor-forms-list-page/components/global-template/select-templates-dialog.jssrc/pages/sponsors/sponsor-forms-list-page/index.jssrc/pages/sponsors/sponsor-list-page.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/select-form-dialog/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/customized-form/__tests__/customized-form-popup.test.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/customized-form/customized-form.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/badge-scan-settings.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/extra-questions.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsor-header.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsorship.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/sponsor-order-details.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/components/sponsor-user-form.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.jssrc/pages/sponsors/sponsor-users-list-page/components/__tests__/process-request-popup.test.jssrc/pages/sponsors/sponsor-users-list-page/components/edit-user-popup/sponsor-user-form.jssrc/pages/sponsors/sponsor-users-list-page/components/process-request-form.jssrc/pages/sponsors/sponsor-users-list-page/components/users-table.jssrc/pages/sponsors/sponsor-users-list-page/index.jssrc/pages/sponsors/summit-sponsorship-list-page.jssrc/pages/sponsorship-types/components/sponsorship-dialog.jssrc/pages/sponsorship-types/sponsorship-list-page.jssrc/pages/summits/summit-directory-page.jssrc/pages/tickets/ticket-type-list-page.jstestSetupFile.js
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.js (1)
58-68:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRemove debug logging of Formik state from this dialog.
console.logon validation errors/values can leak user/business data into browser logs and shared diagnostics. Please strip these logs before release.Proposed fix
- useEffect(() => { - if (Object.keys(formik.errors).length > 0) { - console.log("Validation errors:", formik.errors); - } - }, [formik.errors]); - - useEffect(() => { - if (Object.keys(formik.values).length > 0) { - console.log("Validation values:", formik.values); - } - }, [formik.values]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.js` around lines 58 - 68, Remove the two useEffect hooks that contain console.log statements logging formik.errors and formik.values, as these debug logs can leak sensitive user or business data into browser logs. Delete the entire useEffect block for formik.errors validation logging and the entire useEffect block for formik.values logging to prevent data leakage before release.src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js (1)
40-42:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix undefined
_in sort handler to prevent runtime failure.
onSort(_, key, dir)references_without declaration, so clicking sort can throwReferenceErrorand break sorting. Pass an explicit placeholder (null) or forward only supported args.Proposed fix
const handleSort = (key, dir) => { - onSort(_, key, dir); + onSort(null, key, dir); };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js` around lines 40 - 42, In the handleSort function, the call to onSort passes an undefined variable `_` as the first argument, which will cause a ReferenceError at runtime when sorting is triggered. Replace the underscore `_` with an explicit placeholder value such as `null`, or determine what the first parameter should actually be and pass the correct value. Ensure all arguments passed to onSort are properly defined to prevent runtime failures.src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.js (1)
101-111:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRemove PII-bearing debug logs from this popup.
This logs attendee fields (
attendee_full_name,attendee_company,notes) viaformik.values, which can expose PII in client logs.Proposed fix
- useEffect(() => { - if (Object.keys(formik.errors).length > 0) { - console.log("Validation errors:", formik.errors); - } - }, [formik.errors]); - - useEffect(() => { - if (Object.keys(formik.values).length > 0) { - console.log("Validation values:", formik.values); - } - }, [formik.values]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.js` around lines 101 - 111, Remove the two useEffect hooks that contain console.log statements logging formik.errors and formik.values, as they expose PII (attendee_full_name, attendee_company, notes) in client logs. Delete both the useEffect hook checking formik.errors with console.log("Validation errors:", formik.errors) and the useEffect hook checking formik.values with console.log("Validation values:", formik.values) entirely from the component. These debug statements should not remain in production code.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/speakers/summit-speakers-list-page.js`:
- Line 17: MUI v9 Grid component only accepts integer size values (1–12), but
the add-extra-question-popup.js file uses fractional sizes that are
incompatible. In
src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js
(line 15 and surrounding Grid components), replace all fractional size values:
change `size={4.5}` to an appropriate integer value such as `size={5}` or
`size={4}`, and change `size={0.5}` to `size={1}` or use flex/spacing utilities
instead. Alternatively, increase the column count via `columns={24}` to enable
finer integer-based control. The other files listed
(summit-speakers-list-page.js at line 17, show-pages-list-page/index.js at line
24, sponsor-users-list-per-sponsor/index.js at line 17, form-template-form.js at
line 8, sponsor-header.js at line 16, page-template-popup/index.js at line 14,
and process-request-form.js at line 8) already use integer sizes and require no
changes.
---
Outside diff comments:
In
`@src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js`:
- Around line 40-42: In the handleSort function, the call to onSort passes an
undefined variable `_` as the first argument, which will cause a ReferenceError
at runtime when sorting is triggered. Replace the underscore `_` with an
explicit placeholder value such as `null`, or determine what the first parameter
should actually be and pass the correct value. Ensure all arguments passed to
onSort are properly defined to prevent runtime failures.
In
`@src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.js`:
- Around line 101-111: Remove the two useEffect hooks that contain console.log
statements logging formik.errors and formik.values, as they expose PII
(attendee_full_name, attendee_company, notes) in client logs. Delete both the
useEffect hook checking formik.errors with console.log("Validation errors:",
formik.errors) and the useEffect hook checking formik.values with
console.log("Validation values:", formik.values) entirely from the component.
These debug statements should not remain in production code.
In `@src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.js`:
- Around line 58-68: Remove the two useEffect hooks that contain console.log
statements logging formik.errors and formik.values, as these debug logs can leak
sensitive user or business data into browser logs. Delete the entire useEffect
block for formik.errors validation logging and the entire useEffect block for
formik.values logging to prevent data leakage before release.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4214c5cf-d444-458d-b5b1-f4524ae2b77c
📒 Files selected for processing (66)
src/components/forms/sponsor-settings-form/index.jssrc/components/mui/ClientCard/components/EditAddressDialog.jsxsrc/components/mui/ClientCard/components/EditClientDialog.jsxsrc/components/mui/ClientCard/index.jsxsrc/components/mui/RefundForm/index.jsxsrc/components/mui/formik-inputs/company-input-mui.jssrc/components/mui/formik-inputs/item-price-tiers.jssrc/components/mui/formik-inputs/mui-sponsor-input.jssrc/components/mui/formik-inputs/sponsorship-input-mui.jssrc/components/select-page-template-dialog/index.jssrc/pages/media_file_types/components/media-file-type-dialog.jssrc/pages/media_file_types/media-file-type-list-page.jssrc/pages/speakers/summit-speakers-list-page.jssrc/pages/sponsors-global/form-templates/add-form-template-item-popup.jssrc/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.jssrc/pages/sponsors-global/form-templates/form-template-item-list-page.jssrc/pages/sponsors-global/form-templates/form-template-list-page.jssrc/pages/sponsors-global/form-templates/form-template-popup.jssrc/pages/sponsors-global/form-templates/sponsor-inventory-popup.jssrc/pages/sponsors-global/inventory/inventory-list-page.jssrc/pages/sponsors-global/page-templates/page-template-list-page.jssrc/pages/sponsors-global/page-templates/page-template-popup/index.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-info-module.jssrc/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.jssrc/pages/sponsors/popup/add-sponsor-popup.jssrc/pages/sponsors/popup/edit-tier-popup.jssrc/pages/sponsors/show-pages-list-page/index.jssrc/pages/sponsors/show-purchase-list-page/index.jssrc/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.jssrc/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.jssrc/pages/sponsors/sponsor-form-item-list-page/index.jssrc/pages/sponsors/sponsor-forms-list-page/components/form-template/form-template-form.jssrc/pages/sponsors/sponsor-forms-list-page/components/global-template/select-templates-dialog.jssrc/pages/sponsors/sponsor-forms-list-page/index.jssrc/pages/sponsors/sponsor-list-page.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/select-form-dialog/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/customized-form/customized-form.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/badge-scan-settings.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/extra-questions.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsor-header.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsorship.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/sponsor-order-details.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/components/sponsor-user-form.jssrc/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.jssrc/pages/sponsors/sponsor-users-list-page/components/edit-user-popup/sponsor-user-form.jssrc/pages/sponsors/sponsor-users-list-page/components/process-request-form.jssrc/pages/sponsors/sponsor-users-list-page/index.jssrc/pages/sponsors/summit-sponsorship-list-page.jssrc/pages/sponsorship-types/components/sponsorship-dialog.jssrc/pages/sponsorship-types/sponsorship-list-page.jssrc/pages/summits/summit-directory-page.jssrc/pages/tickets/ticket-type-list-page.js
✅ Files skipped from review due to trivial changes (3)
- src/components/select-page-template-dialog/index.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.js
- src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.js
🚧 Files skipped from review as they are similar to previous changes (19)
- src/pages/summits/summit-directory-page.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
- src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-info-module.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsorship.js
- src/components/mui/formik-inputs/sponsorship-input-mui.js
- src/components/mui/ClientCard/components/EditAddressDialog.jsx
- src/components/mui/formik-inputs/company-input-mui.js
- src/pages/sponsors/sponsor-form-item-list-page/index.js
- src/pages/sponsors/popup/add-sponsor-popup.js
- src/pages/sponsors/sponsor-users-list-page/components/edit-user-popup/sponsor-user-form.js
- src/pages/tickets/ticket-type-list-page.js
- src/components/forms/sponsor-settings-form/index.js
- src/pages/sponsors-global/form-templates/form-template-list-page.js
- src/components/mui/formik-inputs/mui-sponsor-input.js
- src/pages/sponsors-global/page-templates/page-template-list-page.js
- src/pages/media_file_types/components/media-file-type-dialog.js
- src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.js
| import { connect } from "react-redux"; | ||
| import T from "i18n-react/dist/i18n-react"; | ||
| import { Box, Button, Grid2 } from "@mui/material"; | ||
| import { Box, Button, Grid } from "@mui/material"; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
MUI v9 Grid component API support for size and offset props
💡 Result:
In MUI v9, the Grid component supports both size and offset props to manage layout, replacing the legacy breakpoint-specific props (such as xs, sm, etc.) found in earlier versions [1][2]. Size Prop: The size prop defines the width of a Grid item [3][4]. It accepts a number, string, boolean (often used as 'grow'), or an object for responsive values [3][5][6]. - Example: size={{ xs: 12, sm: 6 }} causes the item to occupy the full width on small viewports and half the width on larger ones [5][7]. - Values: You can provide integers (1–12), "auto" to size based on content, or "grow" [5][6][8]. Offset Prop: The offset prop moves a Grid item to the right [5][7]. - Usage: Similar to size, it supports responsive objects (e.g., offset={{ md: 2 }}) or the string "auto", which pushes the item to the far right of the grid container [5][7]. Key Notes for v9: - Deprecation: The legacy Grid props (item, and individual breakpoint props like xs) have been removed [1][9]. - Restrictions: The size and offset props are not supported when the Grid container uses direction="column" or direction="column-reverse" [5]. For vertical layouts, use the Stack component instead [10]. - System Props: In v9, legacy system props have been removed from the Grid component; styling should be handled via the sx prop [10][9].
Citations:
- 1: https://mui.com/material-ui/migration/upgrade-to-v9/
- 2: https://next.mui.com/material-ui/migration/upgrade-to-v9/
- 3: https://mui.com/system/api/grid/
- 4: https://mui.com/material-ui/api/grid/
- 5: https://next.mui.com/system/react-grid/
- 6: https://github.com/mui/material-ui/blob/v9.0.1/packages/mui-material/src/Grid/Grid.tsx
- 7: https://mui.com/material-ui/react-grid/
- 8: https://next.mui.com/material-ui/react-grid/
- 9: [Grid] Remove deprecated system props mui/material-ui#47846
- 10: https://mui.com/system/migration/upgrade-to-v9/
🏁 Script executed:
# First, let's check the actual imports and usage in the files mentioned
cat -n src/pages/speakers/summit-speakers-list-page.js | head -30Repository: fntechgit/summit-admin
Length of output: 1528
🏁 Script executed:
# Check MUI v9 Grid component source to see what props are supported
rg "container" src/pages/speakers/summit-speakers-list-page.js -A 5 -B 5Repository: fntechgit/summit-admin
Length of output: 700
🏁 Script executed:
# Search for Grid usage patterns across all files mentioned
fd -e js -e jsx | xargs rg "Grid.*size|Grid.*container|Grid.*offset" | head -20Repository: fntechgit/summit-admin
Length of output: 2548
🌐 Web query:
MUI v9 Grid component container prop support
💡 Result:
In MUI v9, the Grid component continues to support the container prop [1][2][3][4]. The container prop is a boolean that, when set to true, enables the flex container behavior for the component, allowing it to correctly wrap and space its child Grid items [5][6][3][7]. Key points regarding the Grid component in v9 include: - The container prop remains essential for defining a grid layout [5][6]. - The previous item prop is no longer needed in v9, as Grid components are now treated as items by default [8]. - The API has shifted away from using specific breakpoint props (like xs, sm, md, etc.) directly on the Grid, replacing them with a unified size prop for defining column spans [8]. - For vertical layouts, it is recommended to use the Stack component instead of a Grid with a column direction [9].
Citations:
- 1: https://mui.com/system/api/grid/
- 2: https://mui.com/material-ui/api/grid/
- 3: https://github.com/mui/material-ui/blob/v9.0.1/packages/mui-material/src/Grid/Grid.tsx
- 4: https://next.mui.com/material-ui/api/grid/
- 5: https://next.mui.com/system/react-grid/
- 6: https://mui.com/material-ui/react-grid.md
- 7: https://github.com/mui/material-ui/blob/v9.0.0/packages/mui-system/src/Grid/Grid.tsx
- 8: https://mui.com/material-ui/migration/upgrade-to-v9/
- 9: https://mui.com/system/migration/upgrade-to-v9/
🏁 Script executed:
# Check if any files use fractional sizes like 4.5
rg "size.*[0-9]\.[0-9]|size=.*[0-9]\.[0-9]" src/pages/ | head -10Repository: fntechgit/summit-admin
Length of output: 740
🌐 Web query:
MUI v9 Grid component fractional size values support
💡 Result:
In MUI v9, the Grid component does not support fractional values for the size prop [1][2]. The size prop expects integer values, which correspond to the number of columns an item occupies within the total grid (typically 12 by default) [1][2]. While the Grid component is designed to use integer-based column spans, there are a few ways to achieve flexible or custom layouts if integer sizes are insufficient: 1. Customizing the Column count: You can adjust the total number of columns in the grid by setting the columns prop on the container Grid (e.g., ), which allows for finer control over the proportions using integer values [1][2]. 2. CSS Grid: If your layout requirements demand fractional units (like fr) or complex grid structures that exceed the capabilities of the MUI Grid component's 12-column system, MUI documentation recommends using standard CSS Grid [2][3]. 3. Spacing Support: Note that while size does not support fractions, the spacing prop (which handles gaps between items) does support both positive numbers (including decimals) and strings, as it utilizes the theme.spacing helper [2][3]. For more details on the updated Grid v2 API used in v9, see the official MUI migration and component documentation [4][5][6].
Citations:
- 1: https://next.mui.com/system/react-grid/
- 2: https://next.mui.com/material-ui/react-grid/
- 3: https://mui.com/material-ui/react-grid/
- 4: https://next.mui.com/material-ui/migration/upgrade-to-v9/
- 5: https://next.mui.com/material-ui/api/grid/
- 6: https://mui.com/material-ui/migration/upgrade-to-v9/
🏁 Script executed:
# Let's examine the add-extra-question-popup.js file to see the fractional size usage
cat -n src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js | head -50Repository: fntechgit/summit-admin
Length of output: 2119
🏁 Script executed:
# Get more context around the fractional size usage
sed -n '1,100p' src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.jsRepository: fntechgit/summit-admin
Length of output: 3568
🏁 Script executed:
# Find where size={4.5} is used in the file
rg "size=\{4\.5\}" src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js -B 5 -A 5Repository: fntechgit/summit-admin
Length of output: 1189
🏁 Script executed:
# Get the full context of the Grid component usage
sed -n '200,350p' src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.jsRepository: fntechgit/summit-admin
Length of output: 4593
Fix fractional Grid sizes in add-extra-question-popup.js—MUI v9 Grid does not support fractional size values.
MUI v9's Grid component fully supports size, offset, and container props. However, MUI v9 Grid only accepts integer size values (1–12 by default). The fractional sizes size={4.5} and size={0.5} used in src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js are invalid and will not render correctly.
Refactor these lines to use integer sizes or increase the column count (e.g., <Grid container columns={24}> to allow finer integer-based control):
- Lines using
size={4.5}should be replaced with valid integer values (e.g.,size={5}orsize={4}) - Lines using
size={0.5}should be adjusted (e.g., usesize={1}or leverage flex/spacing utilities)
All other files use integer sizes and are compatible with MUI v9.
📍 Affects 8 files
src/pages/speakers/summit-speakers-list-page.js#L17-L17(this comment)src/pages/sponsors/show-pages-list-page/index.js#L24-L24src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js#L17-L17src/pages/sponsors/sponsor-forms-list-page/components/form-template/form-template-form.js#L8-L8src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/sponsor-header.js#L16-L16src/pages/sponsors-global/page-templates/page-template-popup/index.js#L14-L14src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js#L15-L15src/pages/sponsors/sponsor-users-list-page/components/process-request-form.js#L8-L8
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/speakers/summit-speakers-list-page.js` at line 17, MUI v9 Grid
component only accepts integer size values (1–12), but the
add-extra-question-popup.js file uses fractional sizes that are incompatible. In
src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js
(line 15 and surrounding Grid components), replace all fractional size values:
change `size={4.5}` to an appropriate integer value such as `size={5}` or
`size={4}`, and change `size={0.5}` to `size={1}` or use flex/spacing utilities
instead. Alternatively, increase the column count via `columns={24}` to enable
finer integer-based control. The other files listed
(summit-speakers-list-page.js at line 17, show-pages-list-page/index.js at line
24, sponsor-users-list-per-sponsor/index.js at line 17, form-template-form.js at
line 8, sponsor-header.js at line 16, page-template-popup/index.js at line 14,
and process-request-form.js at line 8) already use integer sizes and require no
changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://app.clickup.com/t/86ba21aeg
Summary by CodeRabbit
Chores
Refactor
Bug Fixes